<template>
	<div class="main">
		<div class="head">
			<div class="title">
				已成功下单未收到补贴/未激活补贴红包？
			</div>
			<div class="list">
				<div class="one">
					1、一般情况下，淘宝/天猫购物支付返回，15分钟内将发放补贴现金。
				</div>
				<div class="tow">
					2、特殊情况下，如网络通信故障等，淘宝购物通知未能及时返回，需要您手动填写淘宝订单号，系统审核通过后，将自动入账现金补贴。
				</div>
			</div>
		</div>
		<div class="order">
			<div class="title">
				已经下单，未找到订单？一键查询
			</div>
			<div class="search-input">
				<van-search
					@search="onSearch"
					v-model="searchVal"
					left-icon="none"
					shape="round"
					placeholder="请输入淘宝/天猫订单号"
					input-align="center"
				/>
			</div>
			<div class="search-btn" @click="btnSearch">
				找回我的订单
			</div>
			<!-- 找不到订单 -->
			<div class="state" v-if="state == 3">
				<div class="state-img">
					<img src="@/assets/images/member/searchgoodsEmpty.png" alt="" />
				</div>
				<div class="state-text">
					找不到该订单
				</div>
			</div>
			<!-- 已找到订单 -->
			<div class="goods" v-if="state == 2 || state == 1">
				<div class="goods-title">
					<span v-if="state == 2">已为您找到订单823646293472744432</span>
					<span v-if="state == 1">{{ errMsg }}</span>
				</div>
				<div class="goods-info" v-if="state == 2">
					<img class="img" :src="goodsInfo.itemImg" alt="" />
					<div class="goods-info-title">
						{{ goodsInfo.itemTitle }}
					</div>
					<div class="bind-btn" @click="binding">
						绑定
					</div>
				</div>
			</div>
		</div>
		<div class="tips">
			<div class="title">
				如何找回订单?
			</div>
			<div class="list">
				<div class="one">
					<div class="li">
						1
					</div>
					<div class="content">
						<div class="c-title">
							复制订单编号
						</div>
						<div class="text">
							打开淘宝，找到【订单详情】 复制订单编号
						</div>
					</div>
				</div>
				<div class="one tow">
					<div class="li">
						2
					</div>
					<div class="content">
						<div class="c-title">
							查询订单
						</div>
						<div class="text">
							返回本页面，粘贴订单编号进行查询
						</div>
					</div>
				</div>
			</div>
			<div class="tips-img">
				<div class="left-img">
					<img src="@/assets/images/member/tips-copy-order.png" alt="" />
				</div>
				<div class="right-img">
					<img src="@/assets/images/member/tips-search-order.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { Search } from 'vant';
export default {
	data() {
		return {
			searchVal: '',
			state: '',
			errMsg: '',
			goodsInfo: {}
		};
	},
	components: {
		'van-search': Search
	},
	methods: {
		onSearch(val) {
			console.log(this.$service);
			this.$service.member.order
				.findBytradeId({
					source: 0,
					tradeId: val
				})
				.then(res => {
					console.log(res);
					if (res[0]) {
						this.state = 2;
						this.goodsInfo = res[0];
					}
				})
				.catch(err => {
					console.log(err);
					if (err.code == 1001) {
						this.state = 3;
					}
					if (err.code == 1002 || err.code == 1003) {
						this.state = 1;
						this.errMsg = err.message;
					}
					if (err.code == 1004) {
						this.$toast('请先授权淘宝号');
					}
				});
		},
		btnSearch() {
			this.onSearch(this.searchVal);
		},
		binding() {
			this.$service.member.order
				.binding({
					source: 0,
					tradeId: this.goodsInfo.id
				})
				.then(() => {
					this.$toast('绑定成功,请返回订单列表查看');
					this.searchVal = '';
					this.state = '';
					this.errMsg = '';
					this.goodsInfo = {};
				})
				.catch(err => {
					console.log(err);
					this.$toast(err.message);
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.main {
	width: 710px;
	margin: 20px auto;
	.head {
		.title {
			height: 66px;
			background: rgba(255, 241, 226, 1);
			border-radius: 16px 16px 0px 0px;
			line-height: 66px;
			font-weight: 500;
			font-size: 24px;
			text-align: center;
		}
		.list {
			background: rgba(255, 255, 255, 1);
			border-radius: 0px 0px 16px 16px;
			font-size: 22px;
			font-weight: 400;
			color: rgba(12, 12, 16, 1);
			padding: 14px 42px 16px 50px;
			.tow {
				margin-top: 8px;
			}
		}
	}
	.order {
		background: rgba(255, 255, 255, 1);
		border-radius: 16px;
		margin-top: 20px;
		text-align: center;
		padding: 50px 30px 48px;
		.title {
			height: 40px;
			font-size: 28px;
			font-weight: 500;
			line-height: 40px;
			color: rgba(0, 0, 0, 1);
		}
		.search-input {
			margin-top: 54px;
			::v-deep .van-field__left-icon {
				width: 0;
				margin-right: 0;
			}
			::v-deep .van-field__control {
				height: 88px;
			}
			.van-search__content {
				background-color: #ffffff;
				padding-left: 20px;
				padding-right: 20px;
				height: 88px;
				background: rgba(244, 244, 244, 1);
				border: 2px solid rgba(234, 234, 234, 1);
				border-radius: 44px;
			}
			.van-cell {
				padding: 0;
			}
		}
		.search-btn {
			width: 382px;
			height: 72px;
			line-height: 72px;
			background: linear-gradient(360deg, rgba(247, 1, 20, 1) 0%, rgba(255, 113, 51, 1) 100%);
			border-radius: 48px;
			color: rgba(255, 255, 255, 1);
			font-size: 28px;
			margin: 32px auto 0 auto;
			cursor: pointer;
		}
		.state {
			.state-img {
				width: 410px;
				height: 302px;
				margin: 88px auto 0 auto;
			}
			.state-text {
				font-size: 28px;
				font-weight: 400;
				line-height: 40px;
				color: rgba(34, 29, 44, 1);
				position: relative;
				z-index: 1;
				top: -50px;
			}
		}
		.goods {
			// @include flexBox(center, center);
			font-size: 26px;
			margin-top: 76px;
			.goods-title {
				font-size: 28px;
				font-weight: 500;
				line-height: 40px;
				color: rgba(34, 29, 44, 1);
				margin-bottom: 54px;
			}
			.goods-info {
				@include flexBox(center, center);
				.img {
					width: 120px;
					height: 120px;
				}
				.goods-info-title {
					flex: 1;
					text-align: left;
					margin-left: 15px;
					margin-right: 15px;
					@include ellipsis(2);
				}
				.bind-btn {
					width: 122px;
					height: 50px;
					line-height: 50px;
					background: linear-gradient(270deg, rgba(255, 72, 74, 1) 0%, rgba(255, 80, 73, 1) 100%);
					border-radius: 28px;
					color: rgba(255, 255, 255, 1);
					font-size: 24px;
				}
			}
		}
	}
	.tips {
		height: 622px;
		background: rgba(255, 255, 255, 1);
		border-radius: 16px;
		font-size: 20px;
		padding: 42px 16px 24px 30px;
		margin-top: 20px;
		.title {
			height: 40px;
			font-size: 28px;
			font-weight: 500;
			line-height: 40px;
			color: rgba(0, 0, 0, 1);
			text-align: center;
		}
		.list {
			@include flexBox(center, center);
			margin-top: 38px;
			.one {
				@include flexBox(center, flex-start);
				.li {
					vertical-align: top;
					font-size: 60px;
					font-weight: 500;
					line-height: 84px;
					color: rgba(255, 201, 201, 1);
					margin-right: 10px;
					align-items: flex-start;
					position: relative;
					top: -15px;
				}
				.content {
					.c-title {
						font-size: 24px;
						font-weight: 500;
						line-height: 34px;
						color: rgba(34, 29, 44, 1);
					}
					.text {
						font-size: 20px;
						color: rgba(128, 128, 128, 1);
						line-height: 28px;
					}
				}
			}
			.tow {
				margin-left: 30px;
			}
		}
		.tips-img {
			@include flexBox(center, flex-start);
			margin-top: 38px;
			.left-img {
				width: 352px;
				height: 344px;
				img {
					width: 100%;
				}
			}
			.right-img {
				width: 308px;
				height: 354px;
				img {
					width: 100%;
				}
			}
		}
	}
}
</style>
